<template>
    <van-nav-bar :title=brand left-text="返回" left-arrow @click-left="onClickLeft" />
    <van-dropdown-menu active-color="#ee0a24">
        <van-dropdown-item v-model="value1" :options="option1" />
        <van-dropdown-item v-model="value2" :options="option2" />
    </van-dropdown-menu>
    <div v-for="item in productlist" class="bigbox" @click="goToDetail(item.proid)">
        <div class="imgs">
            <img :src=item.img1 alt="">
        </div>
        <div class="mesgs">
            <div>
                {{ item.proname }}
            </div>
            <div class="prices">
                <span>￥{{ item.originprice }}</span>
            </div>
            <div class="sold">
                <div>
                    销量{{ item.sales }}
                </div>
                <div>
                    库存{{ item.stock }}
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { categoryBrandproList } from '@/api/api'
import { onMounted, ref, type Ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
const router = useRouter()
const route = useRoute()
const value1: Ref<number> = ref(0)
const value2: Ref<number> = ref(0)
const productlist: Ref<any[]> = ref([])

const brand: Ref<any> = ref('')
// const brand
const option1 = [
    { text: '综合排序', value: 0 },
    { text: '销量排序', value: 1 },
    { text: '价格排序', value: 2 },
]
const option2 = [
    { text: '新品', value: 0 },
    { text: '爆款', value: 1 },
    { text: '预售', value: 2 },
]
const onClickLeft = () => {
    history.back()
}
// 去详情页
const goToDetail = async (proid: any) => {
    router.push({
        path: '/detail',
        query: { id: proid, }
    })
}
onMounted(async () => {
    const category = route?.query.category
    brand.value = route?.query?.brand
    const params = {
        count: 1,
        limitNum: 10,
        brand: brand.value,
        category,
    }
    const res = (await categoryBrandproList(params)) as any
    console.log(res);
    if (res.data.code === '200') {
        productlist.value = res.data.data
    }
})
</script>

<style lang="scss" scoped>
.bigbox {
    display: flex;
    height: 130px;
    margin: 20px 0;
    font-size: 12px;

    .imgs {
        width: 150px;

        img {
            height: 100%;
            width: 100%;
            margin: 0 auto;
        }
    }

    .mesgs {
        width: 200px;
        padding-left: 15px;
        position: relative;

        .sold {
            width: 80%;
            display: flex;
            justify-content: space-between;
            position: absolute;
            bottom: 10px;
        }

        .prices {
            position: absolute;
            bottom: 30px;
            display: flex;
            justify-content: space-between;

            span {
                color: #FB7299;
                font-size: 20px;
            }
        }
    }
}
</style>